@charset "utf-8";
@import url('reset.css');

html{
	font-size: 1px;
}

body{
	margin-top: 0px;
	width: 100%;
}

.scroll_to_top {
  position: fixed;
  z-index: 10;
  bottom: 80rem;
  right: 80rem;
  opacity: 1;
  transition: all 1s;
}
.scroll_to_top img {
  width:50px;
}
	
/*   HEADER  */

.header-bg{
	width: 100%;
	min-height: 810rem;
	background-image: linear-gradient(to bottom, rgba(35, 34, 34, 0), rgba(35, 34, 34, 0.4)),url("..//image/bandeau.jpg") ;
	background-repeat: no-repeat;
    background-size: cover;
    background-position:20% 90%;
    background-attachment: fixed;
    


	}

	.site-header-wrapper{
		display: flex;
		align-items: center;

		width: 1196rem;
		margin:auto;
		
		}

			.logo img{
				padding-top: 20rem;
				width: 85rem;
				height: 100%;
				
			}

		.nav{
			margin-left: 101rem;
			margin-bottom: 20rem; 
			}

			.nav-item{
				display: inline-block;
				padding-top: 40rem;
				padding-right: 30rem;
				font-family: poppins, sans-serif;
				font-weight: 600;
				font-size: 14px;
				color: white;
				text-decoration: none;

				}
	.header-content{
		margin: 230rem auto 0rem auto;
		width: 1196rem;	
		}

		.header-txt{
			width: 496rem;	
			position: relative;

			}


	.header-titre{
		position: absolute;
		top: 0rem;
		left: 0rem;
		color: white;
		line-height: 55rem;

		animation-name: moove-titre;
		animation-duration: 1s;
		animation-direction: normal;
		}


	.header-texte{
		position: absolute;
		top: 105rem;
		left: 0rem;
		color: white;
		margin-top: 37rem;
		width: 359rem;

		animation-name: moove-titre;
		animation-duration: 1s;
		animation-direction: normal;
		animation-delay: .1s;
		}


	.btn-black-border.blanc.position{
		position: absolute;
		top: 210rem;
		left: 0rem;

		animation-name: moove-titre;
		animation-duration: 1s;
		animation-direction: normal;
		animation-delay: .15s;
	}


	@keyframes moove-titre{

		0%{
			left: -1000rem;
			}

		100%{
			left: 0rem;
			}		
		}

/* PRESENTATION */

.presentation{
	display: flex;
	width: 100%;
	background-color: #EFEFEF;
	}	

	.presentation-content{
		margin: 60rem auto;
		width: 792rem;
	}

		.presentation-texte{
			text-align: center;
			margin-bottom: 30rem;
		}
		.btn-black-border.presentation-btn{
			display: block;
			margin: auto;
			width: 220rem;
			text-align: center;
		}


/* ARGUMENT VENTE */


.article{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}
	
	.article-content{
		position: relative;

		display: flex;

		width: 1090rem;
		margin:125rem auto 0rem auto;
	}
	
			.content-parallax{
				width: 536rem;
				height: auto;
				margin-left: 60rem;
			}		

			.article-img img{
				position: relative;
				z-index: 5;
				height: auto;
				width:540rem;
				opacity: 1;
			}

			.article-img-position.skin1{
				margin-left: -40rem;
				transform: translateY(0rem);
			}

				.article-img-log.skin1{
					position: absolute;
					z-index: 1;
				    top: 0rem;
				    left: 15rem;

				}

			.article-img-position.skin2{
				margin-top: -10rem;
				transform: translateY(0rem);
			}

				.article-img-log.skin2{
					position: absolute;
					z-index: 1;
				    top: 0rem;
				    left: 450rem;
					}

			.article-img-position.skin3{
				width: 525rem;
				transform: translateY(140rem);
			}

				.article-img-log.skin3{
					position: absolute;
					z-index: 1;
				    top: 140rem;
				    left: 0rem;
					}


	.article-texte-content{
		margin-left: 10rem;
		width: 388rem;
		opacity: 0;
		transform: translateY(260rem);
		}


		.fade-txt{
			opacity: 1;
			transition: all 1s;
			transform: translateY(220rem);
		}

		.article-texte-titre{
			position: relative;
			margin-bottom: 27rem;
			
		}

		.article-texte-paragraphe{
			position: relative;
			margin-bottom: 27rem;
			font-size: 14rem;
		
		}

		.btn-black-border.fade{
			
		}

/* VIDEO */

.video{
	position: relative;
	width: 1440rem;
	margin: 250rem auto 0rem auto;
	min-height: 695rem;
	
	}

	.video-titre{
		position: relative;
		z-index: 1;
		width: 416rem;
		background-color: #FFE032;
		padding: 20rem 0rem 20rem 122rem;
	}

	.video-annonce{
		position: absolute;
		z-index: 0;
		left: 0;
		top:94rem;
		width: 1440rem;
		height: 600rem;
		background-color: black;

		}

/* ABONNEMENT */
.abonnement{
	width: 100%;
	min-height: 820rem;
	}

	.abonnement-content{
		width: 994rem;
		margin: auto;
		padding-top: 66rem;
	}
		.abonnement-titre{
			text-align: center;
			opacity: 0;
			transform: translateY(50rem);

		}

			.fade-titre{
				opacity: 1;
				transition: all 1s;
				transform: translateY(0rem);
			}

	.abonnement-bloc{
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 76rem;
		}

		.bloc{
			text-align: center;
			width: 287rem;
			min-height: 455rem;
			padding-top: 43rem;


			transform: translateY(600px);
			opacity: 0;
			transition: all .5s;
			transition-timing-function: ease;
		}

			.abo-transition{
				transform: translateY(0px);
				opacity: 1;
			}


			.bloc-trans:hover{
				transform: scale(1.1);
				transition: transform .5s;
			}

			.bloc.color.orange{
				background-color: #019BA4;
				
			}


			.bloc.color.violet{
				background-color: #EDAA2B;
			}

			.bloc.color.bleu{
				background-color: #A82771;
			}

		.bloc-titre{
			color: white;
			text-align: center;
		}

		.bloc-prix{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 83rem;
			margin:25rem 0rem 25rem 0rem;
		}
			.prix{
				font-family: poppins, sans-serif;
				font-weight: 700;
				font-size: 59rem;
				color: white;

			}

			.prix-mois{
				font-family: poppins, sans-serif;
				font-weight: 200;
				font-size: 27rem;
				color: white;
				margin-left: 15rem;
			}

			.bloc-abo-txt{
				font-family: poppins, sans-serif;
				font-weight: 200;
				font-size: 16rem;
				color: white;

				line-height: 30rem;
			}
				.bloc-abo-txt.bold{
					font-weight: 700;
				}

				.btn-black-border:hover .btn-white-border-txt.skin1{
					color: #019BA4;
				}

				.btn-black-border:hover .btn-white-border-txt.skin2{
					color: #EDAA2B;
				}

				.btn-black-border:hover .btn-white-border-txt.skin3{
					color: #A82771;
				}

					.btn-black-border.blanc.skin1{
						margin-top: 10rem;
					}

/* FORMULAIRE */
.formulaire{
	width: 100%;
	min-height: 840rem;
	}

	.formulaire-content{
		position: relative;
		margin: auto;
		width: 1440rem;
	}

		.form-titre{
			position: relative;
			z-index: 1;
			margin-left: 122rem;
			width: 489rem;
		}
			.form-txt{
				margin-top: 35rem;
			}

	
		.form-bloc-content{
			position: absolute;
			z-index: 0;
			left: 0;
			top: 55rem;

			display: flex;
			width: 100%;
			
			}
			.form-left{
				width: 728rem;
				background-color: #FFE032;
			}

				.form-img img{
					width: 100%;
				}

			  	.form-content{
					width: 388rem;
					height: 468rem;
					margin: 170rem 0rem 0rem 122rem;
			  		}

			  		.contact-form{
			  			margin-bottom: 14rem;
			  		}

			  		label{
		  				display: block;
						font-family: poppins, sans-serif;
						font-weight: 700;
						font-size: 18rem;
		  				}

					input[type=text], textarea {
			  			width: 287rem;
			 			padding: 12rem; 
			 			border: 4px solid white; 
			  			margin-top: 6px; 
			  			margin-bottom: 16px; 
			  			}

			  		#message{
			  			height: 200px; 
			  			width: 388rem;
			  		}

		  		.btn-black-border-txt.btn-form {
		  			align-items: center;

					font-family: poppins, sans-serif;
					font-weight: 500;
					font-size: 16px; 
					text-transform: uppercase;
					text-decoration: none;
					background-color: transparent;
					border-color: transparent;

		  			}

		  			.btn-black-border.skinform{
		  				padding-top: 10rem;
		  				padding-bottom: 10rem;
		  			}


		  	.form-img{
				width: 712rem;
				min-height: 815rem;
		
				background-image: url(../image/Header-1.jpg);

			}


/*   NEWSLETTERS  */

.site-news-letter{
	position: relative;
	width: 100%;
	min-height: 320rem;
	


	}
	.site-news-letter-content{
		position: relative;
		z-index: 5;
		width: 1196rem;
		margin:auto;
		
	}

		.site-news-letter-content p{
			text-align: center;
			margin: 0rem auto 40rem auto;
			width: 792rem;
			height: auto;

			font-family: poppins, sans-serif;
			font-weight: 400;
			font-size: 16rem;
		}

		.site-news-letter-titre{
			width: 388rem;
			margin-bottom: 30rem;
		}

		.form-newsletter{
			width: 590rem;
			height: 50rem;
			margin: 20rem auto;
		}


		.form-newsletter-field {
		    width: 518rem;
		    height: 50rem;
		    padding: 0 15rem;
		    border: 1px solid white;
		    letter-spacing: 0.1em;
	   	 }

	   	 .form-newsletter-submit {
		    position: relative;
		    left: -5rem;
		    width: 70rem;
		    height: 50rem;
		    background: #000000 url(../image/mail.svg) center center no-repeat;
		    background-size: 30rem auto;
		    border: none;
		    text-indent: -999rem;
		    cursor: pointer;
		    transition: all 0.1s;
		}

	.site-news-letter-bg{
		position: absolute;
		z-index: 1;
		top: 30rem;
		left: 0rem;
		z-index: 1;
		width: 100%;
		min-height: 290rem;
		background-color: #019BA4;
		}


/*  FOOTER  */

.site-footer{
	width: 100%;
	min-height: 249rem;
	background-color: rgb(20,20,20);
	padding-top: 21rem;
	}

	.site-footer-content-nav{
		margin: 0rem auto 25rem auto;
		padding-top: 5rem;
		width: 590rem;
	
	}

	.site-nav-footer-item{
		display: flex;
		justify-content: space-between;
	}
		.site-nav-footer-item a{
		font-family: poppins, sans-serif;
		font-weight: 600;
		font-size: 12rem;
		color: white;
		text-decoration: none;
		}

	.site-footer-content-social{
		display: flex;
		width: 276rem;
		margin: auto;

	}
		.site-footer-nav-social{
			margin-left: 20rem;
		}

		.site-footer-logo img{
			width: 80rem;
			height: auto;
		}

		.site-icon-footer{
			display: flex;
		}
		.sharers-item {
			width: 45rem;
			height: 45rem;
			margin: 10rem 5rem 0rem 0rem; 
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100%;
			text-indent: -999rem;
			cursor: pointer;
			transition: all 0.1s;
		}

				.sharers-item.is-twitter {
					background-image: url("../image/twiter.svg");
				}

				.sharers-item.is-facebook {
					background-image: url("../image/facebook.svg");
				}

				.sharers-item.is-instagram {
					background-image: url("../image/insta.svg");
				}

	.site-mentions-legales{
		display: block;
		margin: 20rem auto 0rem auto;
		text-align: center;
		font-family: poppins, sans-serif;
		font-weight: 300;
		font-size: 12rem;
		color: white;
		opacity: 0.7;
		text-decoration: none;
	}

/*  TYPO */
h1{
	font-family: poppins, sans-serif;
	font-weight: 700;
	font-size: 50rem;
	text-transform: uppercase;
	line-height: 55rem;
	}



p{
	font-family: poppins, sans-serif;
	font-weight: 300;
	font-size: 16rem;
	line-height: 20rem;
	}


/* BOUTON NOIR */
.btn-black-border{
      position: relative;

	  display: inline-block;
	  border: 3px solid black; 
	  color: black; 
	  padding: 16px 60rem;

	  font-family: poppins, sans-serif;
	  font-weight: 500;
	  font-size: 16px; 
	  text-transform: uppercase;
	  text-decoration: none;

	  transition: all 0.3s;
	}

	.btn-black-border-txt{
		position: relative;
		z-index: 2;
		}

	.btn-black-border-hover {
		position: absolute;
		z-index: 1; 
		top: 0;
		left: 0;

		width: 0;
		height: 100%;
		background-color: black;

		transition: all 0.3s;
		}

			.btn-black-border:hover .btn-black-border-txt{
				color: white;
			}

			.btn-black-border:hover .btn-black-border-hover{
				width: 100%;
				background-color: black;		
			}



/* BOUTON BLANC */
.btn-white-border-txt{
		position: relative;
		z-index: 2;
	}

	.btn-white-border-hover {
		position: absolute;
		z-index: 1; 
		top: 0;
		left: 0;

		width: 0;
		height: 100%;
		background-color: white;

		transition: all 0.3s;
	}

			.btn-black-border:hover .btn-white-border-txt{
				color: black;

			}

			.btn-black-border.blanc:hover .btn-white-border-hover{
				width: 100%;
				background-color: white;
			}

	.btn-black-border.blanc{
	  margin-top: 40rem;
	  border: 3rem solid white; 
	  color: white; 
	}

/* ANIMATION */

	/* HEADER */
	.nav-item::after {
		content: '';
		display: block;
		width: 0%;
		border-bottom: 2rem solid white;
		transition: width 0.3s;
	}

		.nav-item:hover::after {
		width: 100%;
		}



	.lien-footer::after {
		content: '';
		display: block;
		width: 0%;
		border-bottom: 2rem solid white;
		transition: width 0.3s;
		}

		.lien-footer:hover::after {
		width: 100%;
		}